<template>
	<view>
		<tt-bar leftIcon="icon-back" leftText="再去逛逛" :leftTapFun="toIndex"></tt-bar>
		<view class="resBox">
			<image class="img" mode="widthFix" src="@/pagesA/static/payRst.png"></image>
			<text class="resText">支付成功!</text>
			<view class="ttBox">
				<view class="line"></view>
				<text>接下来的消息流程</text>
				<view class="line"></view>
			</view>
			<view class="ulList">
				<view class="row">
					<view class="circle"></view>
					<text>在订单详情页查看联系方式或在线咨询</text>
				</view>
				<view class="row">
					<view class="circle"></view>
					<text>在体验课程时，验证体验码，享受学习之美</text>
				</view>
			</view>
			
			
			<view class="btnBox">
				<button class="btn_show" @tap="toIndex">返回首页</button>
				<button @tap="toOrderDt">查看订单</button>
			</view>
			<view v-if="showgroupId" class="showgroupId">
				<button class="showpintuanBtn" open-type="share">邀请好友一起拼好课</button>
			</view>
			
		</view>
		<shareAction ref="shareAction"></shareAction>
	</view>
</template>

<script>
import ttBar from '@/components/ttBar/ttBar.vue';
export default {
	components: {
		ttBar
	},
	data() {
		return {
			orderId: '',			
			groupId:0,
			img:"",
			name:"",			
			showgroupId:false
		};
	},
	methods: {
	
		getshowgroupId(){
			if(this.groupId =='null'){
				this.groupId = null
			}
			if(this.groupId && this.groupId !=0){
				this.showgroupId = true
				
			} else {
				this.showgroupId = false
				
			}
		},
		toOrderDt() {
			this.toPage({
				url: 'orderDt',
				id: this.orderId
			});
		},
		toIndex() {
			this.toPage({
				url: 'index'
			});
		},
		// 分享
		share() {
			uni.$emit('showShare', {
				type: 1,
				id: this.groupId,
				actId:this.actId				
			});
			this.$refs.shareAction.open();
		},
		
	},
	onLoad(cfm) {
		this.orderId = cfm.id;
		this.groupId = cfm.groupId
		this.img = cfm.img
		this.name = cfm.name		
		this.getshowgroupId()
	},
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500);
	},
	//页面分享
	onShareAppMessage(res) {
		let _href = '';
		if (this.isLogin) {
			_href = 'pages/index/index?url=myGroupDetailnew&uid=' + this.userInfo.userId + '&id=' + this.groupId;
			
		} else {
			
				_href = 'pages/index/index?url=myGroupDetailnew&id=' + this.groupId;
			
			
		}
		return {
			title: this.name,
			path: _href,
			imageUrl: this.img
		};
	},
};
</script>

<style lang="less">
.resBox {
	display: flex;
	flex-direction: column;
	align-items: center;
	.img {
		width: 70%;
		display: block;
		margin-top: 40upx;
	}
	.resText {
		margin: 100upx;
		text-align: center;
		font-size: 50upx;
		// font-weight: bold;
		color: #ff9c00;
		margin-top: 40upx;
	}
	.btnBox {
		display: flex;
		justify-content: space-around;
		padding: 0 20upx;
		margin-bottom: 30rpx;
		button {		    
			margin: 10rpx;
			height: 80upx;
			width: 255rpx;
			padding: 0 60upx;
			font-size: 32upx;
			border: 2upx solid #ff9c00;
			line-height: 76upx;
			border-radius: 40upx;
			color: #ff9c00;
			background-color: rgba(0, 0, 0, 0);
		}
		button:after {
			border: none;
			outline: none;
		}
		.btn_show{
			background-color:#ff9c00 ;
			color: #fff;
		}
	}
	
}
.ttBox {
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: 32upx;
	.line {
		flex-grow: 1;
		height: 2px;
		border-top: 1px dotted #aaaaaa;
		margin: 0 30upx;
	}
	text {
		font-size: 32upx;
		color: #202932;
	}
}
.ulList {
	display: flex;
	flex-direction: column;
	margin-bottom: 100upx;
	.row {
		display: flex;
		align-items: center;
	}
	.circle {
		width: 18upx;
		height: 18upx;
		border-radius: 50%;
		background-color: #ffb93f;
		margin-right: 16upx;
	}
	text {
		font-size: 28rpx;
		color: #9a9a9a;
	}
}
.showgroupId{
	display: flex;
	justify-content: center;
	width: 100%;
	
	.showpintuanBtn{
		width: 530rpx;
		height: 84upx;
		margin: 30upx 50upx;
		border-radius: 42upx;
		color: #ffffff;
		font-size: 36upx;
		font-weight: bold;
		line-height: 84upx;
		border: none;
		background: linear-gradient(to right, #ff7f2a, #ff5a2a);
	}
	
}
	

</style>
